<template>
  <el-card>
    <template #header>
      <h3 v-text="t('Standalone task')"></h3>
    </template>
    
    <!-- 任务选择 -->
    <el-row :gutter="8" style="align-items: center;">
      <el-col :span="4">
        <span v-text="t('Task') + ':'"></span>
      </el-col>
      <el-col :span="20">
        <el-select 
          v-model="taskStore.selectedTaskId"
          @change="taskStore.selectTask"
          style="width: 100%;"
        >
          <el-option 
            v-for="task in taskStore.taskList" 
            :key="task.id" 
            :label="task.title"
            :value="task.id"
          />
        </el-select>
      </el-col>
    </el-row>

    <!-- 任务配置 -->
    <el-row :gutter="8">
      <el-col :span="24">
        <div>
          <span v-text="t('Task config') + ':'"></span>
        </div>
        <el-input
          v-model="taskStore.taskConfig"
          type="textarea"
          :rows="4"
          spellcheck="false"
        />
      </el-col>
    </el-row>

    <!-- 运行按钮和结果 -->
    <el-row :gutter="8" style="align-items: center;">
      <el-col :span="8">
        <el-button 
          type="primary" 
          @click="taskStore.runTask"
          :disabled="!taskStore.canRunTask"
          style="width: 100%;"
        >
          {{ t('Run task') }}
        </el-button>
      </el-col>
      <el-col :span="16">
        <div style="text-align: right;">
          <span>{{ taskStore.taskResult }}</span>
        </div>
      </el-col>
    </el-row>
  </el-card>
</template>
  
  <script setup>
  import { onMounted } from 'vue'
  import { useStandaloneTaskStore } from '@/stores/standaloneTask'
  import { useLanguageStore } from '@/stores/language'
  
  const taskStore = useStandaloneTaskStore()
  const languageStore = useLanguageStore()
  
  // 翻译函数
  const t = (key) => {
    const translations = {
      'Standalone task': {
        'en': 'Standalone task',
        'zh': '独立任务'
      },
      'Task': {
        'en': 'Task',
        'zh': '任务'
      },
      'Task config': {
        'en': 'Task config',
        'zh': '任务配置'
      },
      'Run task': {
        'en': 'Run task',
        'zh': '运行任务'
      }
    }
    return translations[key]?.[languageStore.isChinese ? 'zh' : 'en'] || key
  }
  
  onMounted(() => {
    taskStore.initializeTaskPanel()
  })
  </script>